<template>
  <!-- <div class="flex">
    <div class="w280"></div>
    <div class="flex-1"></div>
    <div class="w280"></div>
  </div> -->
  <div class="flex">
    <div class="w280">
      <a-card :bordered="true" :bodyStyle="{padding:'0'}">
        <a-row style="margin: 10px 10px 10px 10px">
          <a-input-search placeholder="搜索 手机号/姓名/订单号" v-model="queryParam.keyword" enter-button  @search="onSearch"/>
        </a-row>
        <a-row>
          <a-col span="23" align="right"><label>共 {{ total }} 条</label></a-col>
        </a-row>
        <div style="overflow-y: scroll;">
          <a-row style="height: 940px;">
            <a-list item-layout="horizontal" :data-source="dataSource">
              <div
                v-if="showLoadingMore"
                slot="loadMore"
                :style="{ textAlign: 'center', marginTop: '12px',marginBottom:'12px', height: '32px', lineHeight: '32px' }"
              >
                <a-spin v-if="loadingMore" />
                <a-button @click="onLoadMore" style="margin-bottom: 12px">
                  加载更多
                </a-button>
              </div>
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :bodyStyle="chooseId==item.id?bodyStyle1:bodyStyle0" :bordered="false" style="width:96%"
                        @click="handleChoosePatient(item)">
                  <a-row style="margin: 10px 10px 5px 20px">
                    <a-col span="12">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;'">{{ item.patientName
                        }}</label>
                    </a-col>
                    <a-col span="12" align="right">
                      <label
                        :style="chooseId==item.id?'margin-left: 14px;margin-right: 2px;color:white':'margin-left: 10px;margin-right: 2px;'">
                        {{ item.patientSex }}&nbsp;&nbsp;{{ item.patientAge }}岁
                      </label>
                    </a-col>
                  </a-row>
                  <a-row style="margin: 0px 10px 20px 20px">
                    <a-col span="20" align="left">
                      <label :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;color:#959393'">风险等级：{{ item.riskLevel }}</label>
                    </a-col>
                  </a-row>
                </a-card>
              </a-list-item>
            </a-list>
          </a-row>
        </div>


      </a-card>
    </div>
    <div class="flex-1">
      <a-card :bodyStyle="{padding:'0'}" :bordered="false" style="margin-left:3px;margin-right: 3px">
        <a-button @click='handleGoodsDataView()' slot="extra">查看服务方案</a-button>
        <a-button @click='handleEdit()' slot="extra" style="margin-left: 10px">查看详情</a-button>

        <a-row style="height: 930px;margin: 10px 20px 10px 20px">
          <a-descriptions title="测评结果" bordered :column="2" style="margin-top: 30px">
            <a-descriptions-item label="姓名">
              {{model.patientName}}
            </a-descriptions-item>
            <a-descriptions-item label="性别">
              {{model.patientSex}}
            </a-descriptions-item>
            <a-descriptions-item label="年龄" >
              {{model.patientAge}}岁
            </a-descriptions-item>

            <a-descriptions-item label="报告编码">
              {{model.reportCode}}
            </a-descriptions-item>
            <a-descriptions-item label="报告时间">
              {{model.createTime}}
            </a-descriptions-item>
            <a-descriptions-item label="观察有效期">
              {{model.effectiveTime}}
            </a-descriptions-item>
            <a-descriptions-item label="负责医生" >
              {{model.doctorName}}
            </a-descriptions-item>
            <a-descriptions-item label="是否确认" >
              {{model.izSure=='0'?"未确认":"已确认"}}
            </a-descriptions-item>

          </a-descriptions>

          <a-descriptions title="评估指标" bordered :column="2" style="margin-top: 50px">
            <a-descriptions-item label="评估等级">
              {{model.riskLevel}}
            </a-descriptions-item>
            <a-descriptions-item label="体重指数" v-if="model.w">
              {{model.w.resultValue+"("+model.w.intervalBriefRemark+")"}}
            </a-descriptions-item>
            <a-descriptions-item label="心脏健康指数" v-if="model.k">
              {{model.k.resultValue+"("+model.k.intervalBriefRemark+")"}}
            </a-descriptions-item>
            <a-descriptions-item label="健康心脏年损失值" v-if="model.m">
              {{model.m.resultValue+"("+model.m.intervalBriefRemark+")"}}
            </a-descriptions-item>
            <a-descriptions-item label="心脏年龄"  v-if="model.h">
              {{model.h.resultValue+"("+model.h.intervalBriefRemark+")"}}
            </a-descriptions-item>
            <a-descriptions-item label="血管硬化指数"  v-if="model.l">
              {{model.l.resultValue+"("+model.l.intervalBriefRemark+")"}}
            </a-descriptions-item>
            <a-descriptions-item label="危险因子数"  v-if="model.d">
              {{model.d.resultValue+"("+model.d.intervalBriefRemark+")"}}
            </a-descriptions-item>
            <a-descriptions-item label="体质类型"  v-if="model.c">
              {{model.c.resultValue}}
            </a-descriptions-item>
          </a-descriptions>

          <a-descriptions title="血压指标" bordered :column="3" style="margin-top: 50px">
            <a-descriptions-item :label="item.indexName" v-for="item in bloodList">
              {{item.dataValue}}
            </a-descriptions-item>

          </a-descriptions>
        </a-row>

      </a-card>
    </div>
    <div class="w280">
      <a-card :bordered="false"  title="历史记录" :bodyStyle="{padding:'0'}">
        <a-row style="height: 860px;padding: 0px 10px 0px 10px ">
          <div style="overflow-y: scroll;height: 860px;">
            <a-collapse v-if="historyDataSource.length>0">
              <a-collapse-panel :key="data.id" :header="data.riskLevel"  v-for="data in historyDataSource">
                <label slot="extra" type="setting" style="margin-left: 10px;color: #8a8a8a">{{ data.createDate }}</label>
                <div style="font-weight: 500;color: #8a8a8a">风险等级：{{ data.riskLevel }}</div>
                <div style="font-weight: 500;color: #8a8a8a;margin-top: 3px">时间：{{ data.createTime }}</div>
                <div style="font-weight: 500;color: #8a8a8a;margin-top: 3px">负责人：{{ data.doctorName }}</div>
              </a-collapse-panel>
            </a-collapse>
          </div>

        </a-row>
      </a-card>
      <h-his-estimate-result-modal ref='modalForm' @ok='modalFormOk'></h-his-estimate-result-modal>
      <h-patient-evaluation-goods-modal ref="modalGoodsData" @ok='modalFormOk'></h-patient-evaluation-goods-modal>
    </div>
  </div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { deleteAction, getAction, httpAction, postAction } from '@api/manage'
import moment from 'moment'
import HPatientEvaluationGoodsModal from './modules/HPatientEvaluationGoodsModal'
import HHisEstimateResultModal from './modules/HHisEstimateResultModal'
export default {
  name: '客户画像页面',
  mixins: [mixinDevice, JeecgListMixin],
  components: {
    JDictSelectTag,
    HPatientEvaluationGoodsModal,
    HHisEstimateResultModal
  },
  data() {
    return {
      description: '客户画像页面',
      disableMixinCreated: true,
      visible: false,
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      bodyStyle0: { padding: '0', height: '65px', borderRadius: '8px', marginLeft: '2%' },
      bodyStyle1: { padding: '0', height: '65px', borderRadius: '8px', marginLeft: '2%', background: '#69c966' },
      chooseId: 0,
      url: {
        list: '/ch/evaluation/result/list',
        get: '/his/patient',
        getTag: '/his/patient/tag',
        bloodList: '/his/patient/healthy/data/dy/list',
        historyList:'/ch/evaluation/result/history/list',
      },
      pageNo: 1,
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      dataSource: [],
      total: 0,
      model: {},
      bloodList:[],
      historyDataSource:[],
      patientId:0,
    }
  },
  created() {
    this.getData(true)
  },
  computed: {

  },
  methods: {
    moment,
    handleChoosePatient(item) {
      if (this.chooseId == item.id) {
        this.chooseId = 0
        return
      }
      this.chooseId = item.id
      this.getInfo(item)
    },
    onSearch(){
      this.getData(true)
    },
    onLoadMore() {
      this.loadingMore = true
      this.showLoadingMore = false
      this.getData(false)
    },
    getData(isRefresh) {
      const that = this
      if (isRefresh) {
        that.pageNo = 1
      }
      that.queryParam.pageNo = this.pageNo
      that.queryParam.pageSize = 20
      getAction(that.url.list, that.queryParam).then((res) => {
        if (res.success) {
          that.dataSource = res.result.records
          if (that.dataSource && that.dataSource.length > 0 && isRefresh) {
            that.getInfo(that.dataSource[0])
          }
          if (res.result.totalPages > res.result.pageNo) {
            that.showLoadingMore = true
            that.pageNo++
          } else {
            that.showLoadingMore = false
          }
          that.total = res.result.total
        }
      }).finally(() => {
        this.loadingMore = false
      })
    },
    getInfo(record) {
      const that = this
      that.chooseId = record.id
      that.patientId=record.patientId;
      that.model = record
      getAction(this.url.bloodList,{busCode:record.reportCode}).then((res) => {
        if (res.success&&res.result.records) {
            that.bloodList = res.result.records[0].itemList;
        }
      })
      getAction(this.url.historyList,{patientId:record.patientId}).then((res) => {
        if (res.success&&res.result) {
            that.historyDataSource = res.result;
        }
      })
    },
    getzHistoryData(memberId) {
      const that = this
      getAction(that.url.listHistory, { 'pageNo': 1, 'pageSize': 30, 'memberId': memberId }).then((res) => {
        if (res.success) {
          that.historyDataSource = res.result.records
        }
      }).finally(() => {

      })
    },
    handleGoodsDataView() {
      this.$refs.modalGoodsData.view(this.model)
      this.$refs.modalGoodsData.title = '服务方案'
      this.$refs.modalGoodsData.disableSubmit = false
    },
    handleEdit: function () {
      this.$refs.modalForm.edit(this.model);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.mr10{
  font-weight:500;
  color:#8b96a3;
  margin-right:30px;
  font-size:18px
}

.mr333{
  font-weight:500;
  color:#333;
  margin-right:30px;
  font-size:18px
}
</style>
